<template>
  <div id="fh5co-main">
    <div class="fh5co-narrow-content">
      <h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">{{data.title}}</h2>
      <h5 class="fh5co-label animate-box" data-animate-effect="fadeInLeft">标签：<span v-for="val in data.labels">{{val}}&nbsp;&nbsp;&nbsp;</span>
      </h5>
      <div class="row row-bottom-padded-md">
        <div class="col-sm-12 col-padding animate-box" data-animate-effect="fadeInLeft">
          <div class="blog-entry" v-hljs v-html="data.html_content">
          </div>
        </div>
      </div>
      <div id="get-in-touch">
        <div class="fh5co-narrow-content">
          <div class="row">
            <div class="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft">
              <h4 class="">我们将感谢您的来信：</h4>
              <a class="btn btn-primary btn-md" @click="wxalert()"  href="mailto:1020278488@qq.com?cc=chwangyanan@foxmail.com&subject=博客纠错" target="_top">Send Message</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import HyperDown from '../../static/js/Parser'
  import hljs from '../../static/js/highlight.js'
  export default {
    data() {
      return {
        data: '',
        id: this.$route.query.id,
        doc: ''
      }
    },
    directives: {
      hljs (el) {
        let blocks = el.querySelectorAll('pre code')
        Array.prototype.forEach.call(blocks, hljs.highlightBlock)
      }
    },
    mounted: function () {
      // GET /someUrl
      this.$http.get(global.domain + '/Essay/article/' + this.id + '/').then(response => {
        this.data = response.data
        if (this.data.rich_text !== '' && this.data.rich_text !== 'richText') {
          this.data.html_content = this.data.rich_text
        } else {
          var parser = new HyperDown()
          this.data.html_content = parser.makeHtml(this.data.content.replace('[TOC]', ''))
        }
      }, response => {
        console.log('error')
      })
    },
    methods: {
      wxalert() {
        var ua = window.navigator.userAgent.toLowerCase()
        if (ua.indexOf('android') > -1 && ua.indexOf('micromessenger') > -1) {
          alert('抱歉，点击右上角您可以在浏览器中打开')
        }
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .blog-entry img {
    width:100%!important;
    max-width:500px!important
  }
  .blog-entry {
    padding: 3% 7% 5%;
  }
  @media (min-width:768px) {
    .blog-entry {
      padding: 3% 4% 5%;
    }
  }
</style>
